<template>
  <div id="app">
    <iframe :src="mapUrl" class="wrapper__bg" frameborder="0"></iframe>
    <div class="app" :style="computedStyle">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      widthRatio: 1,
      heightRatio: 1,
      mapUrl: ''
    }
  },
  computed: {
    mode () {
      return this.$store.getters.mode
    },
    computedStyle () {
      return {
        transform: 'scale(' + this.widthRatio + ', ' + this.heightRatio + ')'
      }
    }
  },
  beforeCreate () {
    let that = this
    this.$service.mock.mapUrl({}).then(res => {
      that.mapUrl = res.mapUrl;
    })
  },
  mounted () {
    window.addEventListener('resize', () => {
      this.calcRatio()
    })
    this.calcRatio()
  },
  methods: {
    handleToggleMode () {
      this.$store.commit('SET_MODE', this.$store.getters.mode === 'district' ? 'community' : 'district')
    },
    calcRatio () {
      // 计算实际宽高跟理论宽高（1920*1080）比例，对#app进行缩放
      const width = 3840;
      const height = 2160;
      const actualWidth = window.innerWidth;
      const actualHeight = window.innerHeight;
      this.widthRatio = actualWidth / width;
      this.heightRatio = actualHeight / height;
    }
  }
}
</script>

<style lang="scss">
html {
  height: 100%;
  // min-width: 1920px;
  // min-height: 1080px;
  min-width: $base * 1900px;
  min-height: $base * 1000px;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
* {
  box-sizing: border-box;
}
#app {
  font-family: PingFang-SC-Bold, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  padding: 0;
  // height: 100vh;
  width: $base * 1920px;
  height: $base * 1080px;
  transform-origin: top left;
  .app {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    width: 100%;
    height: 100%;
    width: $base * 1920px;
    height: $base * 1080px;
    pointer-events: none;
  }
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background-color: #06317f;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::-webkit-scrollbar-thumb {
  background-color: #047fdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.toggle-mode {
  position: fixed;
  right: 10px;
  top: 2px;
  padding: 20px 30px;
  font-size: 28px;
  background: #047fdf;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
}

.wrapper__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
